<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="2">
        <holder :lines="10" />
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>年度引用</h4>
        <ve-line height="200px" :data="chartData"></ve-line>
        <h4>研究点分析</h4>
        <el-button @click="push" type="primary" size="small" icon="el-icon-edit">关联规则</el-button>
        <el-button @click="push" type="primary" size="small" icon="el-icon-edit">数据仓库</el-button>
        <el-button @click="push" type="primary" size="small" icon="el-icon-edit">数据挖掘</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="2">
        <el-tabs type="border-card">
          <el-tab-pane label="相似文献">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="参考文献">配置管理</el-tab-pane>
          <el-tab-pane label="引用文献">角色管理</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Holder from '../components/holder/holder';
export default {
  methods: {
    push() {
      this.$router.push({ path: '/analyze' });
    }
  },
  data() {
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    };
  },
  name: 'home',
  components: { Holder }
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
